<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
<style>
    canvas {
        border: 1px solid #d3d3d3;
    }
</style>
</head>
<body>

<canvas id="circuitCanvas" width="600" height="350"></canvas>

<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px Arial';

    // Helper function for drawing dots
    function drawDot(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fill();
    }
    
    // --- Draw AC Source ---
    const sourceX = 80;
    const sourceY = 150;
    const sourceRadius = 20;
    const terminalYTop = 120;
    const terminalYBottom = 180;

    // Terminals (open circles)
    ctx.beginPath();
    ctx.arc(sourceX, terminalYTop, 5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(sourceX, terminalYBottom, 5, 0, 2 * Math.PI);
    ctx.stroke();

    // Sine wave symbol
    ctx.beginPath();
    ctx.moveTo(sourceX, terminalYTop + 5);
    ctx.lineTo(sourceX, sourceY - sourceRadius);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(sourceX, sourceY, sourceRadius, 0, 2 * Math.PI);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(sourceX - 12, sourceY);
    ctx.quadraticCurveTo(sourceX - 6, sourceY - 15, sourceX, sourceY);
    ctx.quadraticCurveTo(sourceX + 6, sourceY + 15, sourceX + 12, sourceY);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(sourceX, sourceY + sourceRadius);
    ctx.lineTo(sourceX, terminalYBottom - 5);
    ctx.stroke();


    // --- Wires to rectifier ---
    const rectifierX1 = 150;
    ctx.beginPath();
    ctx.moveTo(sourceX, terminalYTop);
    ctx.lineTo(rectifierX1, terminalYTop);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(sourceX, terminalYBottom);
    ctx.lineTo(rectifierX1, terminalYBottom);
    ctx.stroke();

    drawDot(rectifierX1, terminalYTop);
    drawDot(rectifierX1, terminalYBottom);

    // --- Draw Bridge Rectifier Box ---
    const rectifierX2 = 300;
    const rectifierY1 = 80;
    const rectifierY2 = 220;
    
    ctx.beginPath();
    ctx.setLineDash([8, 4]);
    ctx.rect(rectifierX1, rectifierY1, rectifierX2 - rectifierX1, rectifierY2 - rectifierY1);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Text inside the box
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('bridge', (rectifierX1 + rectifierX2) / 2, sourceY - 10);
    ctx.fillText('rectifier', (rectifierX1 + rectifierX2) / 2, sourceY + 15);

    // --- Draw Output Circuit ---
    const outYTop = 100;
    const outYBottom = 200;
    const capX = 390;
    const resX = 500;

    // Wires from rectifier
    ctx.beginPath();
    ctx.moveTo(rectifierX2, outYTop);
    ctx.lineTo(resX, outYTop);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(rectifierX2, outYBottom);
    ctx.lineTo(resX, outYBottom);
    ctx.stroke();
    
    drawDot(rectifierX2, outYTop);
    drawDot(rectifierX2, outYBottom);

    // --- Draw Capacitor ---
    const capPlateY1 = 130;
    const capPlateY2 = 145;
    const plateWidth = 40;

    // Connecting wires
    ctx.beginPath();
    ctx.moveTo(capX, outYTop);
    ctx.lineTo(capX, capPlateY1);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(capX, outYBottom);
    ctx.lineTo(capX, capPlateY2);
    ctx.stroke();
    
    // Plates
    ctx.beginPath();
    ctx.moveTo(capX - plateWidth/2, capPlateY1);
    ctx.lineTo(capX + plateWidth/2, capPlateY1);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(capX - plateWidth/2, capPlateY2);
    ctx.lineTo(capX + plateWidth/2, capPlateY2);
    ctx.stroke();

    // Junction dots
    drawDot(capX, outYTop);
    drawDot(capX, outYBottom);
    
    // Labels for Capacitor
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('C', capX + 25, capPlateY1);
    ctx.textBaseline = 'top';
    ctx.fillText('47 \u03BCF', capX, capPlateY2 + 10); // \u03BC is micro symbol

    // --- Draw Resistor ---
    const resHeight = 80;
    const resWidth = 24;
    
    // Connecting wires
    ctx.beginPath();
    ctx.moveTo(resX, outYTop);
    ctx.lineTo(resX, sourceY - resHeight/2);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(resX, outYBottom);
    ctx.lineTo(resX, sourceY + resHeight/2);
    ctx.stroke();

    // Resistor box
    ctx.beginPath();
    ctx.rect(resX - resWidth/2, sourceY - resHeight/2, resWidth, resHeight);
    ctx.stroke();
    
    // Label for Resistor
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('R', resX + resWidth/2 + 10, sourceY);
    
    // --- Draw Figure Caption ---
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.font = 'bold 20px Arial';
    ctx.fillText('Fig. 6.1', canvas.width / 2, canvas.height - 10);

</script>

</body>
</html>